<template>
   <div class="login">
    <fade>
        <div class="appear"  @click="handleClick" v-if="show" key="1">
            <img class="img" src="static/img/bg.jpg">
            <div class="wrapper">
              <div class="title">
                  <p>河南大学投票系统</p>
                  <p>投票端口欢迎使用</p>
              </div>
            </div>
        </div>
         <div class="contain" v-if="!show" key="2">
            <div class="desc">河南大学投票系统</div>
            <div class="wel">投票端口欢迎您的使用</div>
            <!-- <form ref=""> -->
              <input class="input" type="text" name="admin" placeholder="用户ID" v-model="id" autofocus="autofocus">
              <input class="input" type="password" name="pwd" placeholder="密码" v-model="pwd" @keyup.enter="handleSubmit">
              <input class="submit input" type="submit" name="login" value="登录"
               @click="handleSubmit">
           <!--  </form> -->
            <div class="error" v-show="error.length">{{error}}</div>
            <div class="forget" @click="handleforget">忘记密码?</div>

            <!-- <van-radio-group v-model="radio">
              <van-radio name="1" checked-color="#07c160" >单选框 1</van-radio>
              <van-radio name="2" checked-color="#07c160">单选框 2</van-radio>
            </van-radio-group> -->
         </div>
     </fade>
   </div>
</template>

<script>
import Vue from 'vue'
import { RadioGroup, Radio } from 'vant'
import { mapActions } from 'Vuex'
import axios from 'axios'
import fade from 'common/fade'
Vue.use(RadioGroup)
Vue.use(Radio)
export default {
  name: 'Login',
  components: { fade },
  data () {
    return {
      show: true,
      id: '',
      pwd: '',
      error: '',
      timer: null,
      radio: '1'
    }
  },
  methods: {
    ...mapActions(['LoginVote']),
    handleSubmit () {
      if (!this.id.length || !this.pwd.length) {
        swal('亲！您的账号或者密码为空，请重新输入', '', 'error')
        this.error = '亲！您的账号或者密码为空，请重新输入'
      } else {
        const b = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
        this.id.split('').forEach((item, index) => {
          if (item in b) {
            if (this.id.length !== 4) {
              this.error = '亲！您的账号不是4位哦，请重新输入'
            } else if (this.id.length === 4 && index === 3) {
              axios.post('http://192.168.43.188:8081/u_login',
                {
                  id: window.encodeURIComponent(this.id),
                  pwd: window.encodeURIComponent(this.pwd)
                }).then(({data, status}) => {
                if (status === 200) {
                  // console.log(data)
                  if (data && data.code === '111') {
                    this.LoginVote(this.id)
                    // console.log(this.id)
                    this.$router.push('/vote')
                  } else {
                    this.error = data.msg
                  }
                } else {
                  this.error = '服务器出错'
                }
              }).catch((error) => {
                swal('Info' + error, '', 'error')
              })
            }
          } else {
            this.error = '亲！您输入的账号不应该含有字母或者字符请重新输入'
          }
        })
      }
    },
    handleClick () {
      this.show = false
    },
    handleforget () {
      swal('亲！赶快联系管理员吧', '', 'info')
    },
    timeShow () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.show = false
      }, 3000)
    }
  },
  mounted () {
    this.timeShow()
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.login
    position: absolute
    left: 0
    right: 0
    bottom: 0
    top: 0
    background: #eee
    .appear
        z-index: 2
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
      .wrapper
          z-index: 3
          position: absolute
          top: 0
          left: 0
          right: 0
          bottom: 0
        .title
            font-size: 1rem
            color: #bc2565
            font-weight: 1000
            text-align: center
            margin-top: 5rem
            padding: 1.2rem
            background: #fff
            opacity: .5
      .img
          width: 100%
          height: 100%
   .contain
       padding-top: 4rem
       width: 6rem
       margin: auto
       text-align: center
       color: #666
       .desc
           font-size: .7rem
           padding: .4rem 0
        .wel
            font-size: .32rem
            font-weight: 700
            paddint: .2rem 0
        .submit
            background: $bgcolor
            font-size: .4rem
            color: #fff
            font-weight: 600
            border-color: $bgcolor
            font-family:  "Helvetica Neue",Helvetica,Arial,sans-serif
       .input
           width: 6rem
           line-height: .7rem
           padding: .1rem
           margin: .1rem
           border: .02rem solid #ccc
           border-radius: .04rem
           box-sizing: border-box
           font-size: .36rem
       .input:focus
         border: .02rem $bgcolor solid
      .error
          color: red
          font-size: .32rem
          line-height: .8rem
</style>
